<template>
  <div>
    <el-card>
      <el-button type="primary" icon="el-icon-plus">添加</el-button>
      <el-card class="mb_20 mt_20">
        <el-table :data="commodityList" border>
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="160"
          ></el-table-column>
          <el-table-column
            label="品牌名称"
            align="center"
            prop="tmName"
          ></el-table-column>
          <el-table-column
            label="品牌LOGO"
            align="center"
            prop="logoUrl"
          >
          <template slot-scope="scope">
            <img :src="scope.row.logoUrl" class="img_size">
             </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-row>
                <el-button type="warning" icon="el-icon-edit" size="small">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 6, 9]"
        :page-size="3"
        layout=" prev, pager, next, jumper, ->, sizes,total"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import getProApi from "@/api/pro/infoCatd";

export default {
  name: "Trademark",
  data() {
    return {
      page: 3,
      current: 1,
      total: 0,
      commodityList: [],
    };
  },
  methods: {
    // 每页条数
    handleSizeChange(page) {
      this.page = page;
      this.getcarList();
    },
    // 当前页
    handleCurrentChange(current) {
      this.current = current;
      this.getcarList();
    },

    // 获取基本数据的功能函数
    async getcarList() {
      try {
        let result = await getProApi.getCommodityList(this.page, this.current);
        if (result.code === 200) {
          this.commodityList = result.data.records;
          this.total = result.data.total;
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  mounted() {
    this.getcarList();
  },
};
</script>

<style>
.img_size{
  width: 100px;
  height: 100px;
}
</style>